<template>
  <transition name="animate__animated animate__fadeOutDown appear" enter-active-class="animate__fadeInUp" leave-active-class="animate__fadeOutDown">
    <li>
    <div class="select"><input type="checkbox" :checked="good.select" @click="good.select = !good.select"></div>
    <div class="pic">
        <img :src="good.pic" alt="">
    </div>
    <div class="name"></div>
    <div class="price">
        ￥<span>{{good.price}}</span>
    </div>
    <div class="number">
        <!-- :disabled 数量加减按钮设置为0时不可按 大于库存数量不可按 -->
        <button :disabled="good.buy_num <=0" @click="good.buy_num--">-</button>
        <input type="text" v-model="good.buy_num">
        <button :disabled="good.buy_num >=good.number" @click="good.buy_num++">+</button>
    </div>
    <div class="subtotal">
        ￥<span>{{good.price * good.buy_num}}</span>
    </div>
    <div class="del">
        <button @click="delGood(good.id)">删除</button>
    </div>
 </li>
  </transition>
 
</template>

<script>
import "animate.css"
export default{
    name:"CartItem",
    props:["good"],
    methods:{
        //不能自己删除，这个组件拿到的只是单个的对象，去数据的源头（App.vue）做修改
        delGood(id){
            //在bus上放了一个delOneGood的自定义事件,传了要删除的id过去
            if(confirm("确定删除该商品吗"))this.$bus.$emit("delOneGood",id);
        },
    },
};

</script>

<style>
li {
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #333;
  box-sizing: border-box;
  margin: 10px 0;
  border-radius: 10px;
}
li > div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 20px;
}
li > div > span {
  color: red;
}
li > div:first-child > input {
  width: 20px;
  height: 20px;
}
li > div > button {
  font-size: 20px;
  padding: 5px 10px;
  cursor: pointer;
}
li > div.del > button {
  background-color: red;
  color: #fff;
}
li > div.number > input {
  width: 50px;
  height: 24px;
  font-size: 20px;
  text-align: center;
}
.select,
.pic,
.del {
  width: 100px;
}

.name,
.price,
.subtotal {
  width: 200px;
}

.number {
  width: 300px;
}
</style>
